<template>
  <tb-modal :visible="visible" @close="onClickClose">
    <ul class="book-list">
      <li
        :class="['book-item', item.defaultFlag === 1 ? 'active' : '']"
        v-for="(item, index) in booksList"
        :key="index"
      >
        <view class="book-item-base_info">
          <img :src="bookImgList[item.icon]" alt="" />
          <view class="book-item-info">
            <view class="book-item-name">{{ item.bookName }}</view>
            <view class="book-item-record_num">共 {{ item.recordNum }} 笔</view>
            <view class="book-item-amount">
              <span class="income">收入</span>
              <span>{{ item.incomeTotalAmount }}</span>
              /
              <span class="payment"> 支出</span>
              <span>{{ item.paymentTotalAmount }}</span>
            </view>
          </view>
          <i class="icon iconfont icon-edit" @click="onClickEdit(item)"></i>
        </view>
      </li>
    </ul>
    <template v-slot:footer>
      <view class="add-btn" @click="onClickAddBooks">添加账本</view>
    </template>
  </tb-modal>
</template>
<script lang="ts">
import { book } from '@/type/books'
import { bookImgList } from '@/pages/bookPng'
import Vue from 'vue'
export default Vue.extend({
  props: {
    booksList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      bookImgList,
      visible: false,
      // booksList: [] as book[],
    }
  },
  methods: {
    open() {
      this.visible = true
      // this.getBooks()
    },
    onClickClose() {
      this.visible = false
    },
    // getBooks() {
    //   this.$api.getBooksApi().then((res: any) => {
    //     this.booksList = res.data
    //   })
    // },
    // 修改
    onClickEdit(book: book) {
      this.onClickClose()
      uni.navigateTo({ url: `/pages/books/bookSave?id=${book.id}` })
    },
    // 新建账本
    onClickAddBooks() {
      this.onClickClose()
      uni.navigateTo({ url: '/pages/books/bookTemplate' })
    },
  },
})
</script>
<style lang="less" scoped>
.book-list {
  height: 600rpx;
  overflow-y: scroll;
  padding: 10rpx 10rpx;
  .book-item {
    width: 100%;
    height: 200rpx;
    margin-bottom: 20rpx;
    border-radius: 15rpx;
    padding: 20rpx 20rpx 20rpx 30rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(1, 1, 1, 0.2);
    position: relative;
    &.active::before {
      content: '';
      position: absolute;
      width: 15rpx;
      height: 200rpx;
      background-color: #87cefa;
      top: 0;
      left: 0;
      border-top-left-radius: 15rpx;
      border-bottom-left-radius: 15rpx;
    }
  }
  .book-item-base_info {
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
      width: 120rpx;
      height: 160rpx;
      margin-right: 20rpx;
      border-top-right-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
    }
    .book-item-info {
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      .book-item-name {
        min-width: 60rpx;
        font-size: 28rpx;
        padding: 10rpx 20rpx;
        background: rgba(135, 206, 250, 0.2);
        border-radius: 40rpx;
        color: #87cefa;
        text-align: center;
      }
      .book-item-record_num {
        font-size: 26rpx;
        color: #a3a3a3;
        position: relative;
        padding-left: 16rpx;
        &::before {
          content: '';
          width: 8rpx;
          height: 8rpx;
          border-radius: 4rpx;
          background: #ffc104;
          position: absolute;
          left: 0;
          top: 12rpx;
        }
      }
      .book-item-amount {
        font-size: 24rpx;
        color: #b4b4b4;
        span {
          margin: 0 5rpx;
        }
        .income {
          color: #8bd780;
        }
        .payment {
          color: #ff888d;
        }
      }
    }
  }
  .icon-edit {
    font-size: 36rpx;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    color: #666;
    padding: 10rpx;
  }
}
.add-btn {
  position: relative;
  font-size: 26rpx;
  text-align: right;
  padding-right: 30rpx;
  // &::before,
  // &::after {
  //   content: '';
  //   width: 20rpx;
  //   height: 2rpx;
  //   background: #a3a3a3;
  //   position: absolute;
  //   left:0rpx;
  //   top: 50%;
  //   transform: translateY(-50%);
  // }
  // &::before {
  //   transform: rotate(90deg);
  // }
  // &::after {
  //   content: '';
  //   width: 20rpx;
  //   height: 2rpx;
  //   background: #a3a3a3;
  //   position: absolute;
  // }
}
</style>